<template>
  <Card :title="title" :loading="loading">
    <template #extra>
      <a-button
        type="primary"
        size="small"
        shape="round"
        preIcon="iconamoon:sign-plus-bold"
        @click="openModal"
      />
    </template>
    <!-- 水球 -->
    <WaterLevelPond :style="{ height, width, margin }" :config="config" />

    <!-- 输入框 -->
    <BasicModal
      :canFullscreen="false"
      :draggable="false"
      @register="register"
      :title="t('routes.dailyTask.liquidFillPanel.updatedDrinkingTargetValues')"
      @ok="confirmUpdata"
    >
      <Form layout="horizontal" class="p-4 enter-x" :model="formData" ref="formRef">
        <FormItem
          :label="t('routes.dailyTask.liquidFillPanel.originalTargetValue')"
          name="originalTargetValue"
          class="enter-x"
          :rules="[
            { required: true, message: t('routes.dailyTask.liquidFillPanel.originalTargetValue') },
          ]"
        >
          <Input
            class="fix-auto-fill"
            disabled
            v-model:value="formData.originalTargetValue"
            :placeholder="t('routes.dailyTask.liquidFillPanel.originalTargetValue')"
          />
        </FormItem>
        <FormItem
          :label="t('routes.dailyTask.liquidFillPanel.targetValue')"
          name="currentValue"
          class="enter-x"
          :rules="[{ required: true, message: t('routes.dailyTask.liquidFillPanel.targetValue') }]"
        >
          <Input
            class="fix-auto-fill"
            v-model:value="formData.currentValue"
            :placeholder="t('routes.dailyTask.liquidFillPanel.targetValue')"
          />
        </FormItem>
      </Form>
    </BasicModal>
  </Card>
</template>
<script lang="ts" setup>
  import { Card, Form, Input, FormItem } from 'ant-design-vue'
  import { PropType, reactive, ref, watch } from 'vue'
  import { WaterLevelPond } from '@kjgl77/datav-vue3'
  import { BasicModal, useModal } from '/@/components/Modal'
  import { useI18n } from '/@/hooks/web/useI18n'
  import { updataTask } from '/@/api/dailyTask/task'
  import { useMessage } from '/@/hooks/web/useMessage'

  const { createMessage } = useMessage()

  const { t } = useI18n()

  const [register, { openModal: openModal, closeModal }] = useModal()

  const formData = reactive({
    originalTargetValue: '', // 原目标值
    currentValue: '', // 当前更新目标值
  })

  const emit = defineEmits(['completeUpdata'])

  const props = defineProps({
    title: String,
    loading: Boolean,
    drinkingData: Object,
    width: {
      type: String as PropType<string>,
      default: '100%',
    },
    height: {
      type: String as PropType<string>,
      default: '300px',
    },
    margin: {
      type: String as PropType<string>,
      default: '60px auto',
    },
  })

  const config = reactive({
    data: [0],
    shape: 'round',
    waveNum: 1,
    waveHeight: 20,
    formatter: '0%',
  })

  const formRef = ref()
  // 更新数据
  const confirmUpdata = () => {
    formRef.value
      .validate()
      .then(async (val) => {
        await updataTask({ id: 10, currentValue: val.currentValue })
        createMessage.success(t('routes.dailyTask.basic.completeUpdata'))
        closeModal()
        emit('completeUpdata')
      })
      .catch((err) => {
        console.log(err)
      })
  }

  watch(
    () => props.loading,
    () => {
      if (props.loading) {
        return
      }
    },
    { immediate: true },
  )

  watch(
    () => props.drinkingData,
    (val) => {
      if (val) {
        if (val.currentValue <= 0) {
          config.data = [0]
          config.waveHeight = 0
          return
        }
        formData.originalTargetValue = `${val.targetValue} ${val.unit}`
        const value = +((val.currentValue / val.targetValue) * 100).toFixed()
        config.data = [value]
        config.waveHeight = 20
        config.formatter = `${val.currentValue}${val.unit}`
      }
    },
    { deep: true },
  )
</script>
<style lang="less" scoped></style>
